<template>
  <Wrapper>
    <div class="scroll-container">
      <div
        ref="wrapperRef"
        class="scroll-wrapper"
      >
        <!-- maxWidth is used to overwrite vuepress default theme style -->
        <!-- because this component is used in vuepress markdown as a demo -->
        <img
          :style="{ maxWidth: 'none' }"
          class="scroll-content"
          :src="dinnerLink"
        />
      </div>
      <div
        ref="indicatorWrapperRef"
        class="scroll-indicator"
      >
        <img
          class="scroll-indicator-bg"
          :src="dinnerLink"
        >
        <div class="scroll-indicator-handle" />
      </div>
    </div>
  </Wrapper>
</template>

<script setup>
import templateLink from '@/assets/images/Director-General-Progress-Text.png'
import BScroll from '@better-scroll/core'
import Indicators from '@better-scroll/indicators'

BScroll.use(Indicators)

const bscroll = ref(null)
const wrapperRef = ref(null)
const indicatorWrapperRef = ref(null)
const dinnerLink = ref(templateLink)

onMounted(() => initBScroll())

function initBScroll() {
  bscroll.value = new BScroll(wrapperRef.value, {
    startX: -50,
    startY: -50,
    freeScroll: true,
    bounce: false,
    indicators: [
      {
        relationElement: indicatorWrapperRef.value,
        // choose div.scroll-indicator-handle as indicatorHandle
        relationElementHandleElementIndex: 1,
      },
    ],
  })
}
</script>

<style scoped lang="scss">
.scroll {
  &-container {
    --wrapper-width: 640px;
    --wrapper-height: 360px;
  }

  &-wrapper {
    width: var(--wrapper-width);
    height: var(--wrapper-height);
    overflow: hidden;
  }

  &-content {
    width: 1920px;
    height: 1080px;
  }

  &-indicator {
    position: relative;
    margin-top: $space-small;
    width: var(--wrapper-width);
    height: var(--wrapper-height);
  }

  &-indicator-bg {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &-indicator-handle {
    position: absolute;
    border: 1px solid white;
    box-shadow: 0 0 5px white;
    width: 64px;
    height: 36px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: move;
  }
}
</style>
